<template>
	<div id="app">
		<div class="container">
			<transition :name="transitionName">
				<router-view class="router-view"></router-view>
			</transition>
		</div>
		<tab-bar />
	</div>
</template>

<script>
import { mapState } from 'vuex';
import store from './store';
import router from './router';
export default {
	name: 'app',
	components: {
	},
	data() {
		return {
			transitionName: ''
		};
	},
	mounted() {
		if (localStorage.getItem('token')) {
			store.dispatch('ctrl_tabbar', {
				visible: true,
				login: true
			});
			this.getUserInfo();
		}
	},
	computed: {
		...mapState({
			isLoading: state => state.global.loading,
			toastData: state => state.global.toastData,
			customerVisible: state => state.global.toastData
		})
	},

	watch: {
		$route(to, from) {
			const routeDeep = router.options.routes.map(item => item.path);
			const toDepth = routeDeep.indexOf(to.path);
			const fromDepth = routeDeep.indexOf(from.path);
			this.transitionName = toDepth > fromDepth ? 'in' : 'out';
		}
	}
};
</script>

<style lang="less">
#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	// background-color: #0b102a;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow: hidden;
	position: relative;
}
</style>
